import { createLocalFontProcessor } from '@unocss/preset-web-fonts/local'
import {
  defineConfig,
  presetAttributify,
  presetIcons,
  presetTypography,
  presetWebFonts,
  presetWind4,
  transformerDirectives,
  transformerVariantGroup,
} from 'unocss'

export default defineConfig({
  presets: [
    presetWind4(),
    presetAttributify(),
    presetIcons({
      scale: 1.2,
    }),
    presetTypography(),
    presetWebFonts({
      fonts: {
        sans: 'DM Sans',
        serif: 'DM Serif Display',
        mono: 'DM Mono',
      },
      processors: createLocalFontProcessor(),
    }),
  ],
  shortcuts: {
    'btn-primary': 'bg-blue-600 hover:bg-blue-700 text-white px-6 py-3 rounded-lg transition-all duration-300 font-semibold',
    'btn-outline': 'border-2 border-blue-600 text-blue-600 hover:bg-blue-600 hover:text-white px-6 py-3 rounded-lg transition-all duration-300 font-semibold',
    'section-padding': 'py-16 px-4 md:px-8 lg:px-12',
    'container-max': 'max-w-7xl mx-auto',
    'title-gradient': 'bg-gradient-to-r from-blue-600 to-purple-600 bg-clip-text text-transparent',
  },
  theme: {
    colors: {
      primary: '#1e40af',
      secondary: '#7c3aed',
    },
  },
  rules: [
    // 动画 keyframes
    ['animate-fade-up', { animation: 'fade-up 0.7s both' }],
    ['animate-fade-in', { animation: 'fade-in 0.6s both' }],
    ['animate-slide-in', { animation: 'slide-in 0.6s both' }],
  ],
  transformers: [
    transformerDirectives(),
    transformerVariantGroup(),
  ],
  preflights: [
    {
      getCSS: () => `
@keyframes fade-up { from { opacity: 0; transform: translate3d(0, 16px, 0); } to { opacity: 1; transform: translate3d(0, 0, 0); } }
@keyframes fade-in { from { opacity: 0 } to { opacity: 1 } }
@keyframes slide-in { from { opacity: 0; transform: translateX(-8px) } to { opacity: 1; transform: translateX(0) } }
`,
    },
  ],
})
